<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水环智管师 - 水利环境AI管理助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1e6ba3',
                        secondary: '#35a7ff',
                        accent: '#0d4c73',
                        neutral: '#f0f7ff',
                        success: '#36d399',
                        warning: '#fbbd23',
                        error: '#f87272',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 导航栏 -->
    <nav class="bg-primary text-white shadow-md fixed w-full z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-tint text-2xl text-secondary"></i>
                <span class="text-xl font-bold">水环智管师</span>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="#home" class="hover:text-secondary transition-custom">首页</a>
                <a href="#features" class="hover:text-secondary transition-custom">功能</a>
                <a href="#tools" class="hover:text-secondary transition-custom">工具</a>
                <a href="#about" class="hover:text-secondary transition-custom">关于</a>
            </div>
            
            <button class="md:hidden text-white focus:outline-none" id="menu-toggle">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden bg-accent" id="mobile-menu">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#home" class="py-2 hover:text-secondary transition-custom">首页</a>
                <a href="#features" class="py-2 hover:text-secondary transition-custom">功能</a>
                <a href="#tools" class="py-2 hover:text-secondary transition-custom">工具</a>
                <a href="#about" class="py-2 hover:text-secondary transition-custom">关于</a>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section id="home" class="pt-28 pb-16 bg-gradient-to-br from-primary to-accent text-white">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">
                        智能管理水利、环境与公共设施
                    </h1>
                    <p class="text-xl opacity-90 mb-8">
                        利用AI技术提供专业分析与解决方案，助力高效决策与科学管理
                    </p>
                    <a href="#tools" class="bg-secondary hover:bg-blue-400 text-white font-bold py-3 px-8 rounded-lg shadow-lg transition-custom inline-flex items-center">
                        <i class="fa fa-wrench mr-2"></i> 开始使用工具
                    </a>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <img src="https://picsum.photos/id/138/600/400" alt="水利环境管理示意图" class="rounded-lg shadow-2xl max-w-full h-auto transform rotate-1 hover:rotate-0 transition-custom duration-500">
                </div>
            </div>
        </div>
    </section>

    <!-- 功能特点 -->
    <section id="features" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 text-gray-800">专业功能，全面覆盖</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">我们的AI助手集成了多项专业功能，满足水利、环境和公共设施管理的多样化需求</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- 功能卡片1 -->
                <div class="bg-neutral rounded-xl p-6 shadow-lg hover:shadow-xl transition-custom border-t-4 border-primary">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-tint text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">水质分析</h3>
                    <p class="text-gray-600">
                        输入水质监测数据，获取专业分析报告，包括水质评估、问题诊断和改善建议
                    </p>
                </div>
                
                <!-- 功能卡片2 -->
                <div class="bg-neutral rounded-xl p-6 shadow-lg hover:shadow-xl transition-custom border-t-4 border-primary">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-cogs text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">设施诊断</h3>
                    <p class="text-gray-600">
                        描述设施故障症状，获取AI诊断结果和维修建议，支持上传图片辅助判断
                    </p>
                </div>
                
                <!-- 功能卡片3 -->
                <div class="bg-neutral rounded-xl p-6 shadow-lg hover:shadow-xl transition-custom border-t-4 border-primary">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-exclamation-triangle text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">风险评估</h3>
                    <p class="text-gray-600">
                        评估工程项目可能带来的环境风险，提供合规性分析和风险缓解措施
                    </p>
                </div>
                
                <!-- 功能卡片4 -->
                <div class="bg-neutral rounded-xl p-6 shadow-lg hover:shadow-xl transition-custom border-t-4 border-primary">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-lightbulb-o text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">方案生成</h3>
                    <p class="text-gray-600">
                        输入实际问题和约束条件，获取量身定制的解决方案，包括实施步骤和资源需求
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 数据统计展示 -->
    <section class="py-12 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="bg-white rounded-xl shadow-lg p-6 md:p-8">
                <h3 class="text-2xl font-bold mb-6 text-center">水质指标参考标准</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">指标</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">I类水</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">II类水</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">III类水</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IV类水</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">V类水</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">pH值</td>
                                <td class="px-6 py-4 whitespace-nowrap">6-9</td>
                                <td class="px-6 py-4 whitespace-nowrap">6-9</td>
                                <td class="px-6 py-4 whitespace-nowrap">6-9</td>
                                <td class="px-6 py-4 whitespace-nowrap">6-9</td>
                                <td class="px-6 py-4 whitespace-nowrap">6-9</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">溶解氧(DO) mg/L</td>
                                <td class="px-6 py-4 whitespace-nowrap">≥7.5</td>
                                <td class="px-6 py-4 whitespace-nowrap">≥6</td>
                                <td class="px-6 py-4 whitespace-nowrap">≥5</td>
                                <td class="px-6 py-4 whitespace-nowrap">≥3</td>
                                <td class="px-6 py-4 whitespace-nowrap">≥2</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">化学需氧量(COD) mg/L</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤15</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤15</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤20</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤30</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤40</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">总氮(TN) mg/L</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤0.2</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤0.5</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤1.0</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤1.5</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤2.0</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">总磷(TP) mg/L</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤0.02</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤0.1</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤0.2</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤0.3</td>
                                <td class="px-6 py-4 whitespace-nowrap">≤0.4</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div class="mt-8">
                    <canvas id="waterQualityChart" height="250"></canvas>
                </div>
            </div>
        </div>
    </section>

    <!-- 工具区域 -->
    <section id="tools" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold mb-4 text-gray-800">专业工具</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">选择合适的工具，输入相关数据，获取AI驱动的专业分析结果</p>
            </div>
            
            <!-- 工具选项卡 -->
            <div class="max-w-5xl mx-auto">
                <div class="border-b border-gray-200 mb-6">
                    <ul class="flex flex-wrap -mb-px" id="tool-tabs" role="tablist">
                        <li class="mr-2" role="presentation">
                            <button class="tool-tab py-4 px-5 text-lg font-medium text-primary border-b-2 border-primary" 
                                    id="water-quality-tab" data-tab="water-quality">
                                <i class="fa fa-tint mr-2"></i>水质分析
                            </button>
                        </li>
                        <li class="mr-2" role="presentation">
                            <button class="tool-tab py-4 px-5 text-lg font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300" 
                                    id="facility-diagnosis-tab" data-tab="facility-diagnosis">
                                <i class="fa fa-cogs mr-2"></i>设施诊断
                            </button>
                        </li>
                        <li class="mr-2" role="presentation">
                            <button class="tool-tab py-4 px-5 text-lg font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300" 
                                    id="risk-assessment-tab" data-tab="risk-assessment">
                                <i class="fa fa-exclamation-triangle mr-2"></i>风险评估
                            </button>
                        </li>
                        <li role="presentation">
                            <button class="tool-tab py-4 px-5 text-lg font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300" 
                                    id="solution-generator-tab" data-tab="solution-generator">
                                <i class="fa fa-lightbulb-o mr-2"></i>方案生成
                            </button>
                        </li>
                    </ul>
                </div>
                
                <!-- 水质分析工具 -->
                <div class="tool-content" id="water-quality-content">
                    <div class="bg-neutral rounded-xl p-6 shadow-md">
                        <h3 class="text-2xl font-bold mb-6 text-gray-800">水质分析工具</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label for="ph-value" class="block text-sm font-medium text-gray-700 mb-1">pH值</label>
                                <input type="number" id="ph-value" step="0.1" min="0" max="14" value="7.0" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                            </div>
                            <div>
                                <label for="do-value" class="block text-sm font-medium text-gray-700 mb-1">溶解氧(DO, mg/L)</label>
                                <input type="number" id="do-value" step="0.1" min="0" max="20" value="8.0" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                            </div>
                            <div>
                                <label for="cod-value" class="block text-sm font-medium text-gray-700 mb-1">化学需氧量(COD, mg/L)</label>
                                <input type="number" id="cod-value" step="0.1" min="0" max="100" value="15.0" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                            </div>
                            <div>
                                <label for="bod-value" class="block text-sm font-medium text-gray-700 mb-1">生化需氧量(BOD, mg/L)</label>
                                <input type="number" id="bod-value" step="0.1" min="0" max="50" value="5.0" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                            </div>
                            <div>
                                <label for="tn-value" class="block text-sm font-medium text-gray-700 mb-1">总氮(TN, mg/L)</label>
                                <input type="number" id="tn-value" step="0.01" min="0" max="10" value="1.0" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                            </div>
                            <div>
                                <label for="tp-value" class="block text-sm font-medium text-gray-700 mb-1">总磷(TP, mg/L)</label>
                                <input type="number" id="tp-value" step="0.01" min="0" max="2" value="0.1" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <label for="water-location" class="block text-sm font-medium text-gray-700 mb-1">监测地点</label>
                            <input type="text" id="water-location" placeholder="例如：XX河XX段" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label for="water-date" class="block text-sm font-medium text-gray-700 mb-1">监测日期</label>
                                <input type="date" id="water-date" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                            </div>
                            <div>
                                <label for="water-images" class="block text-sm font-medium text-gray-700 mb-1">上传图片（可选）</label>
                                <input type="file" id="water-images" accept="image/*" multiple
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <label for="water-description" class="block text-sm font-medium text-gray-700 mb-1">补充说明（可选）</label>
                            <textarea id="water-description" rows="3" placeholder="添加任何其他相关信息"
                                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
                        </div>
                        
                        <button id="analyze-water-btn" class="bg-primary hover:bg-accent text-white font-bold py-3 px-6 rounded-lg shadow transition-custom inline-flex items-center">
                            <i class="fa fa-bar-chart mr-2"></i> 分析水质
                        </button>
                    </div>
                </div>
                
                <!-- 设施诊断工具 -->
                <div class="tool-content hidden" id="facility-diagnosis-content">
                    <div class="bg-neutral rounded-xl p-6 shadow-md">
                        <h3 class="text-2xl font-bold mb-6 text-gray-800">设施诊断工具</h3>
                        
                        <div class="mb-6">
                            <label for="facility-type" class="block text-sm font-medium text-gray-700 mb-1">设施类型</label>
                            <select id="facility-type" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                                <option value="供水管道">供水管道</option>
                                <option value="污水处理设备">污水处理设备</option>
                                <option value="排水系统">排水系统</option>
                                <option value="水泵站">水泵站</option>
                                <option value="水质监测设备">水质监测设备</option>
                                <option value="防洪设施">防洪设施</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                        
                        <div class="mb-6">
                            <label for="facility-symptoms" class="block text-sm font-medium text-gray-700 mb-1">故障症状</label>
                            <textarea id="facility-symptoms" rows="3" placeholder="详细描述您观察到的问题，例如：管道漏水、设备异响等"
                                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label for="usage-years" class="block text-sm font-medium text-gray-700 mb-1">使用年限（年）</label>
                                <input type="number" id="usage-years" min="0" value="10" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                            </div>
                            <div>
                                <label for="facility-images" class="block text-sm font-medium text-gray-700 mb-1">上传设施照片（可选）</label>
                                <input type="file" id="facility-images" accept="image/*" multiple
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <label for="maintenance-history" class="block text-sm font-medium text-gray-700 mb-1">维护历史（可选）</label>
                            <textarea id="maintenance-history" rows="2" placeholder="描述该设施的维护历史和过往问题"
                                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
                        </div>
                        
                        <button id="diagnose-facility-btn" class="bg-primary hover:bg-accent text-white font-bold py-3 px-6 rounded-lg shadow transition-custom inline-flex items-center">
                            <i class="fa fa-stethoscope mr-2"></i> 诊断故障
                        </button>
                    </div>
                </div>
                
                <!-- 风险评估工具 -->
                <div class="tool-content hidden" id="risk-assessment-content">
                    <div class="bg-neutral rounded-xl p-6 shadow-md">
                        <h3 class="text-2xl font-bold mb-6 text-gray-800">环境风险评估工具</h3>
                        
                        <div class="mb-6">
                            <label for="project-type" class="block text-sm font-medium text-gray-700 mb-1">项目类型</label>
                            <select id="project-type" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                                <option value="水利工程">水利工程</option>
                                <option value="污水处理厂建设">污水处理厂建设</option>
                                <option value="河道整治">河道整治</option>
                                <option value="市政管网改造">市政管网改造</option>
                                <option value="工业废水处理">工业废水处理</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                        
                        <div class="mb-6">
                            <label for="project-location" class="block text-sm font-medium text-gray-700 mb-1">项目地点</label>
                            <input type="text" id="project-location" placeholder="项目所在详细位置" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                        </div>
                        
                        <div class="mb-6">
                            <label for="project-description" class="block text-sm font-medium text-gray-700 mb-1">项目描述</label>
                            <textarea id="project-description" rows="4" placeholder="详细描述项目内容、规模和主要工艺"
                                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
                        </div>
                        
                        <div class="mb-6">
                            <label for="sensitive-areas" class="block text-sm font-medium text-gray-700 mb-1">周边敏感区域</label>
                            <textarea id="sensitive-areas" rows="2" placeholder="如饮用水源地、自然保护区、居民区等"
                                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
                        </div>
                        
                        <button id="assess-risk-btn" class="bg-primary hover:bg-accent text-white font-bold py-3 px-6 rounded-lg shadow transition-custom inline-flex items-center">
                            <i class="fa fa-shield mr-2"></i> 评估风险
                        </button>
                    </div>
                </div>
                
                <!-- 方案生成工具 -->
                <div class="tool-content hidden" id="solution-generator-content">
                    <div class="bg-neutral rounded-xl p-6 shadow-md">
                        <h3 class="text-2xl font-bold mb-6 text-gray-800">解决方案生成工具</h3>
                        
                        <div class="mb-6">
                            <label for="problem-description" class="block text-sm font-medium text-gray-700 mb-1">问题描述</label>
                            <textarea id="problem-description" rows="4" placeholder="详细描述您遇到的问题或挑战"
                                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
                        </div>
                        
                        <div class="mb-6">
                            <label for="constraints" class="block text-sm font-medium text-gray-700 mb-1">约束条件</label>
                            <textarea id="constraints" rows="3" placeholder="如预算限制、时间要求、技术限制、环境限制等"
                                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
                        </div>
                        
                        <div class="mb-6">
                            <label for="expected-outcome" class="block text-sm font-medium text-gray-700 mb-1">期望结果</label>
                            <textarea id="expected-outcome" rows="2" placeholder="您希望通过解决方案达到什么效果"
                                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
                        </div>
                        
                        <div class="mb-6">
                            <label for="related-data" class="block text-sm font-medium text-gray-700 mb-1">相关数据（可选）</label>
                            <textarea id="related-data" rows="3" placeholder="提供任何相关的数据或信息，帮助生成更精准的方案"
                                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
                        </div>
                        
                        <button id="generate-solution-btn" class="bg-primary hover:bg-accent text-white font-bold py-3 px-6 rounded-lg shadow transition-custom inline-flex items-center">
                            <i class="fa fa-lightbulb-o mr-2"></i> 生成方案
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 结果展示区域 -->
            <div id="result-container" class="mt-10 hidden">
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="bg-primary text-white p-4">
                        <h3 class="text-xl font-bold flex items-center">
                            <i class="fa fa-file-text-o mr-2"></i>分析结果
                        </h3>
                    </div>
                    <div class="p-6">
                        <div id="loading-indicator" class="hidden text-center py-10">
                            <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-4"></div>
                            <p class="text-gray-600">AI正在分析数据，请稍候...</p>
                        </div>
                        <div id="error-message" class="hidden bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
                            <p><i class="fa fa-exclamation-circle mr-2"></i><span id="error-text"></span></p>
                        </div>
                        <div id="result-content" class="prose max-w-none"></div>
                    </div>
                    <div class="bg-gray-50 px-6 py-4 border-t border-gray-200 flex justify-end">
                        <button id="download-result-btn" class="bg-gray-700 hover:bg-gray-800 text-white font-medium py-2 px-4 rounded-lg transition-custom inline-flex items-center">
                            <i class="fa fa-download mr-2"></i> 下载报告
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="md:flex">
                    <div class="md:shrink-0">
                        <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://picsum.photos/id/119/400/600" alt="水利环境管理">
                    </div>
                    <div class="p-8">
                        <h2 class="text-2xl font-bold mb-4 text-gray-800">关于水环智管师</h2>
                        <p class="mt-2 text-gray-600">
                            水环智管师是一款基于人工智能技术的专业助手，致力于为水利、环境和公共设施管理领域提供智能化解决方案。
                        </p>
                        <p class="mt-2 text-gray-600">
                            我们利用先进的文心一言4.5大模型，结合行业专业知识，为用户提供水质分析、设施诊断、风险评估和解决方案生成等服务，
                            帮助管理人员做出更科学的决策，提高工作效率和管理水平。
                        </p>
                        <div class="mt-6">
                            <h3 class="font-bold text-gray-800 mb-2">核心优势</h3>
                            <ul class="space-y-1 text-gray-600">
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                                    <span>基于专业知识和AI技术的精准分析</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                                    <span>多模态处理能力，支持图片等多媒体输入</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                                    <span>简洁易用的界面，无需专业AI知识即可操作</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                                    <span>可定制的分析报告，满足不同场景需求</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-accent text-white py-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-tint text-2xl text-secondary"></i>
                        <span class="text-xl font-bold">水环智管师</span>
                    </div>
                    <p class="text-gray-300">
                        智能管理水利、环境与公共设施，助力高效决策与科学管理
                    </p>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#home" class="text-gray-300 hover:text-white transition-custom">首页</a></li>
                        <li><a href="#features" class="text-gray-300 hover:text-white transition-custom">功能</a></li>
                        <li><a href="#tools" class="text-gray-300 hover:text-white transition-custom">工具</a></li>
                        <li><a href="#about" class="text-gray-300 hover:text-white transition-custom">关于</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">联系我们</h3>
                    <ul class="space-y-2">
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-2 text-secondary"></i>
                            <a href="mailto:contact@shuihuanzhiguan.com" class="text-gray-300 hover:text-white transition-custom">contact@shuihuanzhiguan.com</a>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-2 text-secondary"></i>
                            <span class="text-gray-300">400-123-4567</span>
                        </li>
                    </ul>
                    <div class="mt-4 flex space-x-4">
                        <a href="#" class="text-gray-300 hover:text-white transition-custom"><i class="fa fa-weixin text-xl"></i></a>
                        <a href="#" class="text-gray-300 hover:text-white transition-custom"><i class="fa fa-weibo text-xl"></i></a>
                        <a href="#" class="text-gray-300 hover:text-white transition-custom"><i class="fa fa-linkedin text-xl"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="mt-8 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm">
                <p>© 2025 水环智管师 - 保留所有权利</p>
                <p class="mt-1">免责声明：本工具提供的分析结果仅供参考，重要决策请咨询专业人员</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 设置默认日期为今天
        document.getElementById('water-date').valueAsDate = new Date();
        
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 工具选项卡切换
        const toolTabs = document.querySelectorAll('.tool-tab');
        toolTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除所有选项卡的活动状态
                toolTabs.forEach(t => {
                    t.classList.remove('text-primary', 'border-primary');
                    t.classList.add('text-gray-500', 'border-transparent', 'hover:text-gray-700', 'hover:border-gray-300');
                });
                
                // 设置当前选项卡为活动状态
                this.classList.remove('text-gray-500', 'border-transparent', 'hover:text-gray-700', 'hover:border-gray-300');
                this.classList.add('text-primary', 'border-primary');
                
                // 隐藏所有内容
                const toolContents = document.querySelectorAll('.tool-content');
                toolContents.forEach(content => {
                    content.classList.add('hidden');
                });
                
                // 显示当前选项卡对应的内容
                const tabId = this.getAttribute('data-tab');
                document.getElementById(`${tabId}-content`).classList.remove('hidden');
            });
        });
        
        // 水质标准图表
        const ctx = document.getElementById('waterQualityChart').getContext('2d');
        const waterQualityChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['I类水', 'II类水', 'III类水', 'IV类水', 'V类水'],
                datasets: [
                    {
                        label: '溶解氧(DO, mg/L)',
                        data: [7.5, 6, 5, 3, 2],
                        backgroundColor: 'rgba(54, 162, 235, 0.7)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    },
                    {
                        label: '化学需氧量(COD, mg/L)',
                        data: [15, 15, 20, 30, 40],
                        backgroundColor: 'rgba(255, 99, 132, 0.7)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1
                    },
                    {
                        label: '总磷(TP, mg/L)',
                        data: [0.02, 0.1, 0.2, 0.3, 0.4],
                        backgroundColor: 'rgba(75, 192, 192, 0.7)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '数值'
                        }
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: '地表水环境质量标准基本项目标准限值'
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
        
        // 处理表单提交和API调用
        async function analyzeWaterQuality() {
            showLoading();
            
            const data = {
                parameters: {
                    "pH值": document.getElementById('ph-value').value,
                    "溶解氧(DO)": `${document.getElementById('do-value').value} mg/L`,
                    "化学需氧量(COD)": `${document.getElementById('cod-value').value} mg/L`,
                    "生化需氧量(BOD)": `${document.getElementById('bod-value').value} mg/L`,
                    "总氮(TN)": `${document.getElementById('tn-value').value} mg/L`,
                    "总磷(TP)": `${document.getElementById('tp-value').value} mg/L`
                },
                location: document.getElementById('water-location').value,
                date: document.getElementById('water-date').value,
                description: document.getElementById('water-description').value
            };
            
            try {
                const response = await fetch('/api/analyze-water-quality', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                
                const result = await response.json();
                
                if (result.success) {
                    displayResult(result.result);
                } else {
                    showError(result.error || '分析失败，请稍后重试');
                }
            } catch (error) {
                console.error('Error:', error);
                showError('网络错误，请检查连接后重试');
            }
        }
        
        async function diagnoseFacility() {
            showLoading();
            
            const data = {
                facility_type: document.getElementById('facility-type').value,
                symptoms: document.getElementById('facility-symptoms').value,
                usage_years: parseInt(document.getElementById('usage-years').value),
                maintenance_history: document.getElementById('maintenance-history').value
            };
            
            try {
                const response = await fetch('/api/diagnose-facility', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                
                const result = await response.json();
                
                if (result.success) {
                    displayResult(result.result);
                } else {
                    showError(result.error || '诊断失败，请稍后重试');
                }
            } catch (error) {
                console.error('Error:', error);
                showError('网络错误，请检查连接后重试');
            }
        }
        
        async function assessRisk() {
            showLoading();
            
            const data = {
                project_type: document.getElementById('project-type').value,
                location: document.getElementById('project-location').value,
                description: document.getElementById('project-description').value,
                sensitive_areas: document.getElementById('sensitive-areas').value
            };
            
            try {
                const response = await fetch('/api/assess-risk', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                
                const result = await response.json();
                
                if (result.success) {
                    displayResult(result.result);
                } else {
                    showError(result.error || '风险评估失败，请稍后重试');
                }
            } catch (error) {
                console.error('Error:', error);
                showError('网络错误，请检查连接后重试');
            }
        }
        
        async function generateSolution() {
            showLoading();
            
            const data = {
                problem: document.getElementById('problem-description').value,
                constraints: document.getElementById('constraints').value,
                expected_outcome: document.getElementById('expected-outcome').value,
                related_data: document.getElementById('related-data').value
            };
            
            try {
                const response = await fetch('/api/generate-solution', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                
                const result = await response.json();
                
                if (result.success) {
                    displayResult(result.result);
                } else {
                    showError(result.error || '方案生成失败，请稍后重试');
                }
            } catch (error) {
                console.error('Error:', error);
                showError('网络错误，请检查连接后重试');
            }
        }
        
        // 结果展示函数
        function showLoading() {
            const resultContainer = document.getElementById('result-container');
            const loadingIndicator = document.getElementById('loading-indicator');
            const errorMessage = document.getElementById('error-message');
            const resultContent = document.getElementById('result-content');
            
            resultContainer.classList.remove('hidden');
            loadingIndicator.classList.remove('hidden');
            errorMessage.classList.add('hidden');
            resultContent.innerHTML = '';
            
            // 滚动到结果区域
            resultContainer.scrollIntoView({ behavior: 'smooth' });
        }
        
        function showError(message) {
            const loadingIndicator = document.getElementById('loading-indicator');
            const errorMessage = document.getElementById('error-message');
            const errorText = document.getElementById('error-text');
            
            loadingIndicator.classList.add('hidden');
            errorMessage.classList.remove('hidden');
            errorText.textContent = message;
        }
        
        function displayResult(content) {
            const loadingIndicator = document.getElementById('loading-indicator');
            const errorMessage = document.getElementById('error-message');
            const resultContent = document.getElementById('result-content');
            
            loadingIndicator.classList.add('hidden');
            errorMessage.classList.add('hidden');
            
            // 将Markdown转换为HTML显示
            // 简单处理常用Markdown格式
            let html = content
                .replace(/# (.*?)\n/g, '<h1 class="text-2xl font-bold mt-6 mb-4">$1</h1>')
                .replace(/## (.*?)\n/g, '<h2 class="text-xl font-bold mt-5 mb-3">$1</h2>')
                .replace(/### (.*?)\n/g, '<h3 class="text-lg font-bold mt-4 mb-2">$1</h3>')
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                .replace(/\*(.*?)\*/g, '<em>$1</em>')
                .replace(/\n- (.*?)(?=\n|$)/g, '<li class="ml-6 mb-1">$1</li>')
                .replace(/(<li.*?>.*?<\/li>)+/g, '<ul class="mb-4">$&</ul>')
                .replace(/\n\n/g, '</p><p>')
                .replace(/^(?!<h|<ul|<li|<p).*?(?=\n|$)/g, '<p>$&</p>');
            
            resultContent.innerHTML = html;
        }
        
        // 下载报告功能
        function downloadResult() {
            const resultContent = document.getElementById('result-content').innerText;
            const blob = new Blob([resultContent], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            
            const a = document.createElement('a');
            a.href = url;
            a.download = `水环智管师分析报告_${new Date().toLocaleDateString()}.txt`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
        
        // 绑定按钮事件
        document.getElementById('analyze-water-btn').addEventListener('click', analyzeWaterQuality);
        document.getElementById('diagnose-facility-btn').addEventListener('click', diagnoseFacility);
        document.getElementById('assess-risk-btn').addEventListener('click', assessRisk);
        document.getElementById('generate-solution-btn').addEventListener('click', generateSolution);
        document.getElementById('download-result-btn').addEventListener('click', downloadResult);
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                    
                    // 如果是移动端，点击后关闭菜单
                    const mobileMenu = document.getElementById('mobile-menu');
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
        
        // 滚动时改变导航栏样式
        window.addEventListener('scroll', function() {
            const nav = document.querySelector('nav');
            if (window.scrollY > 50) {
                nav.classList.add('py-2');
                nav.classList.remove('py-3');
                nav.classList.add('bg-accent');
                nav.classList.remove('bg-primary');
            } else {
                nav.classList.add('py-3');
                nav.classList.remove('py-2');
                nav.classList.add('bg-primary');
                nav.classList.remove('bg-accent');
            }
        });
    </script>
</body>
</html>
